<template>
    <div>
        <el-container style="height: 100vh; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

                <userHead></userHead>
                <el-menu >
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-custom"></i>个人信息</template>
                        <el-menu-item @click="toUserMsg">查看信息</el-menu-item>
                        <el-menu-item @click="toUpdateMsg">修改信息</el-menu-item>
                        <el-menu-item @click="toUpdatePh">修改手机</el-menu-item>
                        <el-menu-item @click="toUpdatePw">修改密码</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-document"></i>&nbsp;&nbsp;帖&nbsp;子&nbsp;&nbsp;</template>
                        <el-menu-item @click="toPostsShow">已经发布</el-menu-item>
                        <el-menu-item @click="toPostsCreate">创建帖子</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-document"></i>&nbsp;&nbsp;看&nbsp;贴&nbsp;&nbsp;</template>
                        <el-menu-item @click="toPostsStart">精品帖子</el-menu-item>
                        <el-menu-item @click="toPostsOther">随便看看</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4" v-show="havePower">
                        <template slot="title"><i class="el-icon-coordinate"></i>&nbsp;&nbsp;管&nbsp;理&nbsp;&nbsp;</template>
                        <el-menu-item @click="toApplyUser">用户管理</el-menu-item>
                        <el-menu-item @click="toApplyPosts">帖子管理</el-menu-item>
                    </el-submenu>
                </el-menu>
                <el-button @click="toUserMsg">ceshi</el-button>
            </el-aside>

            <el-container>
                <el-main>
                    <message v-show="userMsg"/>
                    <updateMsg v-show="updateMsg"/>
                    <phone v-show="updatePh"/>
                    <password v-show="updatePw"/>
                    <show v-show="postsShow"/>
                    <create v-show="postsCreate"/>
                    <start v-show="postsStart"/>
                    <other v-show="postsOther"/>
                    <userApply v-show="applyUser"/>
                    <postsApply />
<!--                    v-show="applyPosts"-->
                </el-main>
            </el-container>
        </el-container>



    </div>
</template>

<script>
    import userHead from "../components/user/userHead";

    import message from "../components/user/message";
    import updateMsg from "../components/user/updateMsg";
    import phone from "../components/user/phone";
    import password from "../components/user/password";
    import show from "../components/posts/show"
    import create from "../components/posts/create";
    import start from "../components/posts/start";
    import other from "../components/posts/other";
    import userApply from "../components/apply/userApply";
    import postsApply from "../components/apply/postsApply";

    export default {
        components: {
            userHead,
            message,
            updateMsg,
            phone,
            password,
            show,
            create,
            start,
            other,
            userApply,
            postsApply
        },
        name: "Master",
        created: function f() {
            this.$axios
                .get('/api/user/getAllMsg')
                .then((req)=>{
                    var tmp = req.data.data;
                    this.id = tmp.id;
                    this.power = tmp.power;
                    if(this.power == 2){
                        this.havePower = true;
                    }
                })
        },
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                userMsg:false,
                updateMsg:false,
                updatePh:false,
                updatePw:false,
                postsShow:false,
                postsCreate:false,
                postsStart:false,
                postsOther:false,
                applyUser:false,
                applyPosts:false,
                id:'',
                power:'',
                havePower:false
            }
        },
        methods:{
            toUserMsg:function () {
                this.allFalse();
                this.userMsg = true;

            },
            toUpdateMsg:function(){
                this.allFalse();
                this.updateMsg = true;
            },
            toUpdatePh:function(){
                this.allFalse();
                this.updatePh = true;
            },

            toUpdatePw:function(){
                this.allFalse();
                this.updatePw = true;
            },
            toPostsShow:function(){
                this.allFalse();
                this.postsShow = true;
            },
            toPostsCreate:function(){
                this.allFalse();
                this.postsCreate = true;
            },
            toPostsStart:function(){
                this.allFalse();
                this.postsStart = true;
            },
            toPostsOther:function(){
                this.allFalse();
                this.postsOther = true;
            },
            toApplyUser:function(){
                this.allFalse();
                this.applyUser = true;
            },
            toApplyPosts:function(){
                this.allFalse();
                this.applyPosts = true;
            },



            allFalse:function () {
                this.userMsg=false;
                this.updateMsg=false;
                this.updatePh=false;
                this.updatePw=false;
                this.postsShow=false;
                this.postsCreate=false;
                this.postsStart=false;
                this.postsOther=false;
                this.applyUser=false;
                this.applyPosts=false;
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>
